<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>计算属性：注重结果，主要是需要把计算的结果作为属性来使用。</li>
        <li>属性侦听：注重逻辑郭晨，主要是用于当某个属性值发生变化之后，需要处理的逻辑。</li>
    </ul>
    <h2>watch属性监听</h2>
    <p>可以监听</p>
    <ul>
        <li>可以侦听data中的属性值变化</li>
        <li>可以侦听computed中的属性值变化</li>
        <li>可以侦听props中的属性值变化</li>
    </ul>
    <p>不可以监听</p>
    <ul>
        <li>methods的结果改变</li>
    </ul>
    <main id="app">
        <input type="text" v-model.number="meter">米 = <input type="text" v-model.number="kilometer">千米
        <br>
        厘米：{{cm}}
        <br>
        分米：{{dm()}}
    </main>
</body>
<script src="../vue.min.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data() {
            return {
                meter: 0,
                kilometer: 0,
            }
        },
        computed: {
            cm() {
                return this.meter * 100;
            }
        },
        methods: {
            dm() {
                return this.meter * 10;
            }
        },
        watch: {
            meter(newVal, oldVal) {
                console.log("米，newVal = ", newVal, ",oldVal = ", oldVal);
                this.kilometer = newVal / 1000;
            },
            kilometer(newVal, oldVal) {
                console.log("千米，newVal = ", newVal, ",oldVal = ", oldVal);
                this.meter = newVal * 1000;
            },
            dm(newVal, oldVal) {
                console.log("分米，newVal = ", newVal, ",oldVal = ", oldVal);
            }
        }
    })

    // 也可以使用$watch的方式添加监听
    vue.$watch("cm", function(newVal, oldVal) {
        console.log("厘米，newVal = ", newVal, ",oldVal = ", oldVal);
    })
</script>

</html>